<script setup>
import { ref, onMounted } from 'vue'
import { getAccompanyList, createAccompany, joinAccompany } from '@/api/accompany'
import { showToast, showConfirmDialog } from 'vant'
import { useRouter } from 'vue-router'

const router = useRouter()
const accompanyList = ref([])
const loading = ref(false)
const refreshing = ref(false)
const showCreatePopup = ref(false)

// 创建结伴表单数据
const formData = ref({
    title: '',
    content: '',
    startTime: '',
    endTime: '',
    maxMembers: 2,
    destination: ''
})

// 加载结伴列表
const loadAccompanyList = async () => {
    try {
        loading.value = true
        const res = await getAccompanyList()
        accompanyList.value = res.data.records
    } catch (error) {
        showToast('获取结伴列表失败')
    } finally {
        loading.value = false
        refreshing.value = false
    }
}

// 申请加入结伴
const handleJoin = (id) => {
  showConfirmDialog({
  title: '通知',
  message:
    '请确认是否参加结伴',
})
  .then(() => {
    // on confirm
    joinAccompany(id)
  })
  .catch(() => {
    // on cancel
  });
}

// 创建结伴
const handleCreate = async () => {
    try {
        await createAccompany(formData.value)
        showToast('创建成功')
        showCreatePopup.value = false
        loadAccompanyList()
        formData.value = {
            title: '',
            content: '',
            startTime: '',
            endTime: '',
            maxMembers: 2,
            destination: ''
        }
    } catch (error) {
        showToast('创建失败')
    }
}

const onRefresh = () => {
    refreshing.value = true
    loadAccompanyList()
}

onMounted(() => {
    loadAccompanyList()
})
</script>

<template>
    <div class="accompany-page">
        <van-nav-bar title="结伴同游" left-arrow @click-left="$router.back()">
            <template #right>
                <van-icon name="plus" size="20" class="create-icon" @click="showCreatePopup = true" />
            </template>
        </van-nav-bar>

        <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="refresh-container">
            <div class="content">
                <van-skeleton title :row="3" :loading="loading" v-if="loading" />

                <div v-else class="accompany-list">
                    <div v-for="item in accompanyList" :key="item.id" class="accompany-card">
                        <div class="card-header">
                            <div class="destination">
                                <van-icon name="location" color="#ff6b81" />
                                <span>{{ item.destination }}</span>
                            </div>
                            <div class="members">
                                <van-icon name="friends" color="#4834d4" />
                                <span>{{ item.currentMembers }}/{{ item.maxMembers }}人</span>
                            </div>
                        </div>

                        <div class="card-content">
                            <h3 class="title">{{ item.title }}</h3>
                            <p class="desc">{{ item.content }}</p>
                        </div>

                        <div class="card-footer">
                            <div class="time-info">
                                <van-icon name="clock" color="#2d98da" />
                                <span>{{ item.startTime.split('T')[0] }}</span>
                                <span class="separator">至</span>
                                <span>{{ item.endTime.split('T')[0] }}</span>
                            </div>
                            <div class="action-buttons">
                                <van-button size="small" type="primary" class="detail-btn"
                                    @click="router.push(`/accompany/${item.id}`)">
                                    查看详情
                                </van-button>
                                <van-button size="small" type="success" class="join-btn" @click="handleJoin(item.id)">
                                    申请加入
                                </van-button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="empty" v-if="!loading && accompanyList.length === 0">
                    <van-empty description="暂无结伴信息" />
                </div>
            </div>
        </van-pull-refresh>

        <van-popup v-model:show="showCreatePopup" position="bottom" round class="create-popup">
            <div class="popup-header">
                <h3>创建结伴</h3>
            </div>
            <div class="create-form">
                <van-form @submit="handleCreate">
                    <van-field v-model="formData.title" name="title" label="标题" placeholder="请输入标题"
                        :rules="[{ required: true, message: '请输入标题' }]" />
                    <van-field v-model="formData.content" name="content" label="内容" type="textarea" placeholder="请输入内容"
                        :rules="[{ required: true, message: '请输入内容' }]" />
                    <van-field v-model="formData.destination" name="destination" label="目的地" placeholder="请输入目的地"
                        :rules="[{ required: true, message: '请输入目的地' }]" />
                    <van-field v-model="formData.startTime" name="startTime" label="开始时间" type="datetime-local"
                        placeholder="请选择开始时间" :rules="[{ required: true, message: '请选择开始时间' }]" />
                    <van-field v-model="formData.endTime" name="endTime" label="结束时间" type="datetime-local"
                        placeholder="请选择结束时间" :rules="[{ required: true, message: '请选择结束时间' }]" />
                    <van-field v-model="formData.maxMembers" name="maxMembers" label="最大人数" type="number"
                        placeholder="请输入最大人数" :rules="[{ required: true, message: '请输入最大人数' }]" />
                    <div class="submit-btn">
                        <van-button round block type="primary" native-type="submit">
                            创建结伴
                        </van-button>
                    </div>
                </van-form>
            </div>
        </van-popup>
    </div>
</template>

<style scoped lang="scss">
.accompany-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #43CBFF 10%, #9708CC 100%);

  .van-nav-bar {
    background: transparent;
    
    :deep(.van-nav-bar__title) {
      color: white;
      font-weight: 600;
    }
    
    :deep(.van-icon) {
      color: white;
    }
  }

  .create-icon {
    animation: pulse 2s infinite;
  }

  .refresh-container {
    min-height: calc(100vh - 46px);
  }

  .content {
    padding: 16px;
  }

  .accompany-list {
    .accompany-card {
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: blur(10px);
      border-radius: 16px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
      border: 1px solid rgba(255, 255, 255, 0.18);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      animation: slideIn 0.6s ease-out;
      animation-fill-mode: both;

      &:hover {
        transform: translateY(-6px);
        box-shadow: 0 12px 40px rgba(31, 38, 135, 0.25);
      }

      .card-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 16px;

        .destination,
        .members {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 6px 12px;
          background: rgba(255, 255, 255, 0.3);
          border-radius: 20px;
          font-size: 14px;
          color: white;
          backdrop-filter: blur(4px);

          .van-icon {
            font-size: 16px;
          }
        }
      }

      .card-content {
        margin-bottom: 16px;

        .title {
          font-size: 18px;
          font-weight: 600;
          color: white;
          margin-bottom: 8px;
        }

        .desc {
          font-size: 14px;
          color: rgba(255, 255, 255, 0.8);
          line-height: 1.6;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
      }

      .card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 16px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);

        .time-info {
          display: flex;
          align-items: center;
          gap: 6px;
          color: rgba(255, 255, 255, 0.8);
          font-size: 13px;

          .separator {
            color: rgba(255, 255, 255, 0.5);
          }
        }

        .action-buttons {
          display: flex;
          gap: 8px;

          .van-button {
            border: none;
            border-radius: 20px;
            padding: 0 16px;
            height: 32px;
            font-size: 13px;
            font-weight: 500;
            
            &--primary {
              background: rgba(255, 255, 255, 0.2);
              color: white;
              
              &:active {
                background: rgba(255, 255, 255, 0.3);
              }
            }
            
            &--success {
              background: #3eaf7c;
              color: white;
              
              &:active {
                background: #3eaf7c;
              }
            }
          }
        }
      }
    }
  }

  .create-popup {
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    
    .popup-header {
      text-align: center;
      padding: 16px;
      background: #f8f9fa;
      
      h3 {
        margin: 0;
        font-size: 18px;
        color: #2c3e50;
        font-weight: 600;
      }
    }
    
    .create-form {
      padding: 16px;
      
      .submit-btn {
        margin: 24px 16px;
        
        .van-button {
          background: linear-gradient(135deg, #42b983 0%, #3eaf7c 100%);
          border: none;
          height: 44px;
          font-size: 16px;
          font-weight: 500;
          box-shadow: 0 4px 12px rgba(62, 175, 124, 0.2);
          
          &:active {
            transform: scale(0.98);
          }
        }
      }
    }
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
</style>